<template>
  <a-modal v-model="show" :centered="true" :keyboard="false" :footer="null" :width="1050" @cancel="handleCancleClick"
    title="型号信息">

    <a-card :bordered="false" class="card-area">
      <div :class="advanced ? 'search' : null">
        <!-- 搜索区域 -->
        <a-form layout="horizontal">
          <div :class="advanced ? null : 'fold'">
            <a-row>
              <a-col :md="16" :sm="24">
                <a-form-item label="终端型号代码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input placeholder="终端型号代码、终端型号名称、终端型号描述..." v-model="queryParams.modelCND" />
                </a-form-item>
                <a-form-item label="brandCode" style="display: none">
                  <a-input v-model="queryParams.brandCode" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <div style="text-align: center;">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
          </div>
        </a-form>
      </div>
      <div>
        <div class="operator">
          <a-button v-hasPermission="['model:add']" ghost type="primary" @click="add">新增</a-button>
          <a-button v-hasPermission="['model:import']" ghost type="primary" @click="upload">导入</a-button>
        </div>
        <!-- 表格区域 -->
        <a-table ref="TableInfo" :columns="columns" :rowKey="record => record.id" :dataSource="dataSource"
          :pagination="pagination" :loading="loading"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :scroll="{ x: 2200 }"
          @change="handleTableChange">
          <template slot="email" slot-scope="text, record">
            <a-popover placement="topLeft">
              <template slot="content">
                <div>{{ text }}</div>
              </template>
              <p style="width: 150px;margin-bottom: 0">{{ text }}</p>
            </a-popover>
          </template>
          <template slot="modelOperation" slot-scope="text, record">
            <a-icon v-hasPermission="['model:update']" type="setting" theme="twoTone" twoToneColor="#4a9ff5"
              @click="editModel(record)" title="修改型号"></a-icon>&nbsp;
            <a-icon v-hasPermission="['model:view']" type="eye" theme="twoTone" twoToneColor="#42b983"
              @click="viewModel(record)" title="查看型号"></a-icon>
            <a-badge v-hasNoPermission="['model:update', 'model:view']" userStatus="warning" text="无权限"></a-badge>
          </template>

        </a-table>
        <!-- 型号信息查看 -->
        <model-info @close="handleModelInfoClose" :modelInfoVisiable="modelInfo.visiable"
          :modelInfoData="modelInfo.data">
        </model-info>
        <!-- 新增型号 -->
        <model-add ref="modelAdd" @close="handleModelAddClose" @success="handleModelAddSuccess"
          :modelAddVisiable="modelAdd.visiable" :modelInstId="this.brandInstId">
        </model-add>
        <!-- 型号导入 -->
        <model-import ref="modelImport" @close="handleModelImportClose" :modelUploadVisiable="modelUpload.visiable"
          :modelInstId="this.brandInstId">
        </model-import>
        <!-- 修改型号 -->
        <model-edit ref="modelEdit" @close="handleModelEditClose" @success="handleModelEditSuccess"
          :modelEditVisiable="modelEdit.visiable" :modelInstId="this.brandInstId">
        </model-edit>

      </div>
    </a-card>
  </a-modal>
</template>

<script>
import RangeDate from '@/components/datetime/RangeDate'
import ModelAdd from './ModelAdd'
import ModelInfo from './ModelInfo'
import ModelEdit from './ModelEdit'
import ModelImport from './modelImport'
import { mapState } from "vuex"

export default {
  name: "Model",
  props: {
    modelAdminVisiable: {
      require: true,
      default: false
    },
    brandInstId: '',
  },
  components: { RangeDate, ModelAdd, ModelInfo, ModelEdit, ModelImport },
  data() {
    return {
      advanced: false,
      modelInfo: {
        visiable: false,
        data: {}
      },
      modelAdd: {
        visiable: false
      },
      modelEdit: {
        visiable: false
      },
      modelUpload: {
        visiable: false
      },

      queryParams: {
        modelCND: '',
        instId: '',
        brandCode: ''
      },
      dataSource: [],
      sortedInfo: null,
      paginationInfo: null,
      selectedRowKeys: [],
      pagination: {
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: false,
      instIdData: [],
      da: []

    }
  },
  computed: {
    ...mapState({
      user: state => state.account.user,

    }),
    show: {
      get: function () {
        return this.modelAdminVisiable
      },
      set: function () {
      }
    },
    columns() {
      let { sortedInfo } = this
      sortedInfo = sortedInfo || {}
      let { filteredInfo } = this
      filteredInfo = filteredInfo || {}
      return [{
        title: '终端型号代码',
        dataIndex: 'modelCode'
      }, {
        title: '终端型号名称',
        dataIndex: 'modelName',
        scopedSlots: { customRender: 'modelName' },

      }, {
        title: '终端型号描述',
        dataIndex: 'modelDesc',
        scopedSlots: { customRender: 'modelDesc' },

      }, {
        title: '终端品牌代码',
        dataIndex: 'brandCode',
        scopedSlots: { customRender: 'brandCode' },

      }, {
        title: '联系人姓名',
        dataIndex: 'contactName',
        scopedSlots: { customRender: 'contactName' },

      }, {
        title: '联系电话',
        dataIndex: 'contactPhone',
        scopedSlots: { customRender: 'contactPhone' },

      }, {
        title: '联系人电子邮箱',
        dataIndex: 'contactEmail',
        scopedSlots: { customRender: 'contactEmail' },

      }, {
        title: '状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          switch (text) {
            case '00':
              return <a-tag color="cyan" > 非正式 </a-tag>
            case '01':
              return <a-tag color="pink" > 正式 </a-tag>
            case '02':
              return <a-tag color="pink" > 停用 </a-tag>
            case '03':
              return <a-tag color="pink" > 已注销 </a-tag>
            default:
              return text
          }
        },
        filters: [
          { text: '非正式', value: '00' },
          { text: '正式', value: '01' },
          { text: '停用', value: '02' },
          { text: '已注销', value: '03' }
        ],
        filterMultiple: false,
        filteredValue: filteredInfo.status || null,
        onFilter: (value, record) => record.status.includes(value)
      }, {
        title: '审核状态',
        dataIndex: 'auditStatus',
        customRender: (text, row, index) => {
          switch (text) {
            case '00':
              return <a-tag color="cyan" > 待提交审批 </a-tag>
            case '01':
              return <a-tag color="pink" > 新增-审批流程中 </a-tag>
            case '02':
              return <a-tag color="pink" > 新增-审批通过 </a-tag>
            case '03':
              return <a-tag color="pink" > 新增-审批拒绝 </a-tag>
            case '11':
              return <a-tag color="cyan" > 注销-审批流程中 </a-tag>
            case '12':
              return <a-tag color="pink" > 注销-审批通过 </a-tag>
            case '13':
              return <a-tag color="pink" > 注销-审批拒绝 </a-tag>
            case '21':
              return <a-tag color="pink" > 停用-审批流程中 </a-tag>
            case '22':
              return <a-tag color="cyan" > 停用-审批通过 </a-tag>
            case '23':
              return <a-tag color="pink" > 停用-审批拒绝 </a-tag>
            case '31':
              return <a-tag color="pink" > 启用-审批流程中 </a-tag>
            case '32':
              return <a-tag color="pink" > 启用-审批通过 </a-tag>
            case '33':
              return <a-tag color="cyan" > 启用-审批拒绝 </a-tag>
            case '41':
              return <a-tag color="pink" > 修改-审批流程中 </a-tag>
            case '42':
              return <a-tag color="pink" > 修改-审批通过 </a-tag>
            case '43':
              return <a-tag color="pink" > 修改-审批拒绝 </a-tag>
            default:
              return text
          }
        },
        filters: [
          { text: '待提交审批', value: '00' },
          { text: '新增-审批流程中', value: '01' },
          { text: '新增-审批通过', value: '02' },
          { text: '新增-审批拒绝', value: '03' },
          { text: '注销-审批流程中', value: '11' },
          { text: '注销-审批通过', value: '12' },
          { text: '注销-审批拒绝', value: '13' },
          { text: '停用-审批流程中', value: '21' },
          { text: '停用-审批通过', value: '22' },
          { text: '停用-审批拒绝', value: '23' },
          { text: '启用-审批流程中', value: '31' },
          { text: '启用-审批通过', value: '32' },
          { text: '启用-审批拒绝', value: '33' },
          { text: '修改-审批流程中', value: '41' },
          { text: '修改-审批通过', value: '42' },
          { text: '修改-审批拒绝', value: '43' }
        ],
        filterMultiple: false,
        filteredValue: filteredInfo.auditStatus || null,
        onFilter: (value, record) => record.auditStatus.includes(value)

      }, {
        title: '终端型号操作',
        dataIndex: 'modelOperation',
        fixed: 'right',
        scopedSlots: { customRender: 'modelOperation' }
      }]
    }
  },
  mounted() {
    this.$get('admin/upmporg/getInstList').then((r) => {
      this.instIdData = r.data
    })
  },
  methods: {
    handleCancleClick() {
      this.$emit('close')
      this.queryParams.modelCND = ''
      this.dataSource = []
    },

    upload() {
      this.modelUpload.visiable = true
      let model = this.queryParams
      this.$refs.modelImport.setImportBrandCode(model)
    },

    handleModelImportClose() {
      this.modelUpload.visiable = false
      this.search()
    },

    setTableValues({ ...data }, { ...params }) {
      const pagination = { ...this.pagination }
      pagination.total = data.total
      this.dataSource = data.rows
      this.pagination = pagination
      this.loading = false
      this.queryParams.brandCode = params.brandCode

    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    add() {
      this.modelAdd.visiable = true
      let model = this.queryParams
      this.$refs.modelAdd.setBrandCode(model)
    },


    handleModelAddClose() {
      this.modelAdd.visiable = false
    },
    handleModelAddSuccess() {
      this.modelAdd.visiable = false
      this.$message.success('新增品牌成功')
      this.search()
    },
    viewModel(record) {
      this.modelInfo.data = record
      this.modelInfo.visiable = true
    },
    handleModelInfoClose() {
      this.modelInfo.visiable = false
    },
    editModel(record) {
      if (record.auditStatus === '01' || record.auditStatus === '11' || record.auditStatus === '21'
        || record.auditStatus === '31' || record.auditStatus === '41') {
        this.$confirm({
          title: '提示',
          content: '申请待审批的数据不允许修改',
        });
      } else {
        // console.log(record)
        this.$refs.modelEdit.setModelFormValues(record)
        this.modelEdit.visiable = true
      }
    },

    handleModelEditSuccess() {
      this.modelEdit.visiable = false
      this.$message.success('修改型号成功')
      this.search()
    },
    handleModelEditClose() {
      this.modelEdit.visiable = false
    },



    search() {
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }

      let { sortedInfo, filteredInfo } = this
      let sortField, sortOrder
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field
        sortOrder = sortedInfo.order
      }

      let params = {}
      params.brandCode = this.queryParams.brandCode
      params.modelCode = this.queryParams.modelCND
      params.modelName = this.queryParams.modelCND
      params.modelDesc = this.queryParams.modelCND
      console.log(params)
      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...params,
        ...filteredInfo
      })
    },

    reset() {
      // 取消选中
      this.selectedRowKeys = []
      // 重置分页
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }
      // 重置列排序规则
      this.sortedInfo = null
      // 重置查询参数
      this.queryParams.modelCND = ''
      // // 清空时间选择
      // this.$refs.createTime.reset()
      let params = this.queryParams

      this.$get('modelAdmin', {
        ...params
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.dataSource = data.rows
        this.pagination = pagination
        this.loading = false
      })
    },


    handleTableChange(pagination, filters, sorter) {
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent
        this.paginationInfo.pageSize = this.pagination.defaultPageSize
      }

      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter

      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters
      })
    },
    fetch(params = {}) {
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      this.$get('modelAdmin', {
        ...params
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.dataSource = data.rows
        this.pagination = pagination
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../../../../static/less/Common";
</style>

